Accordion
Example
When using Accordian in navigation, don't use a Drawer Title as a link. You should provide an 'All Items' link within the drawer.
Don't automatically scroll to fit an expanded Accordion Drawer on screen. Not many users will expect the jump to the top.
If one section is already expanded, and the user clicks on another section, should the first one collapse or stay as is? The nature of an accordion would call for automatic collapsing, but it might not be the best option in terms of usability.
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ornare eros et dolor feugiat, eget laoreet metus sodales. Cras ullamcorper eros a maximus commodo. Nunc auctor dignissim justo id venenatis.
Duis maximus a lorem volutpat condimentum. Ut porta tempor augue, a ultrices sapien. Proin at nisl tortor. Vivamus ornare felis massa, eget efficitur dolor sodales sed.
-
Pellentesque at mi pulvinar, elementum quam at, sollicitudin est. Sed blandit elementum justo, eget malesuada orci sagittis a. In tristique at leo non lobortis. Morbi ornare malesuada ullamcorper.
Vestibulum vel diam eu enim congue iaculis vitae consectetur magna. In hac habitasse platea dictumst. Maecenas nibh massa, viverra dapibus lectus nec, euismod aliquam orci. Vivamus lacus risus, hendrerit eu lorem non, tristique finibus arcu.
-
Aenean ut tellus nec urna convallis elementum a ut odio. Phasellus in vestibulum nisl. Mauris eleifend arcu vitae varius dictum. Phasellus eget venenatis metus.
Proin sit amet tincidunt purus, quis egestas magna. Integer ac lobortis orci. Nulla suscipit dictum nibh ut laoreet. Nulla facilisi. Nulla facilisi.
Code
HTML:
<ul id="accordion-65c7" class="accordion">
<li id="accordion-65c7_drawer-1" class="accordion-drawer">
<header id="accordion-65c7_drawer-1_header">
<button type="button" class="accordion-trigger" aria-controls="accordion-65c7_drawer-1_content">
<h3>
<span class="accordion-title">Personal Information</span>
</h3>
</button>
</header>
<section id="accordion-65c7_drawer-1_content" class="accordion-panel" aria-labelledby="accordion-65c7_drawer-1_header">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit…</p>
<p>Duis maximus a lorem volutpat condimentum…</p>
</section>
</li>
<li id="accordion-65c7_drawer-2" class="accordion-drawer">
<header id="accordion-65c7_drawer-2_header">
<button type="button" class="accordion-trigger" aria-controls="accordion-65c7_drawer-2_content">
<h3>
<span class="accordion-title">Billing Address</span>
</h3>
</button>
</header>
<section id="accordion-65c7_drawer-2_content" class="accordion-panel" aria-labelledby="accordion-65c7_drawer-2_header">
<p>Pellentesque at mi pulvinar, elementum quam at, sollicitudin est…</p>
<p>Vestibulum vel diam eu enim congue iaculis vitae consectetur magna…</p>
</section>
</li>
<li id="accordion-65c7_drawer-3" class="accordion-drawer">
<header id="accordion-65c7_drawer-3_header">
<button type="button" class="accordion-trigger" aria-controls="accordion-65c7_drawer-3_content">
<h3>
<span class="accordion-title">Shipping Address</span>
</h3>
</button>
</header>
<section id="accordion-65c7_drawer-3_content" class="accordion-panel" aria-labelledby="accordion-65c7_drawer-3_header">
<p>Aenean ut tellus nec urna convallis elementum a ut odio…</p>
<p>Proin sit amet tincidunt purus, quis egestas magna…</p>
</section>
</li>
</ul>
CSS:
button {
margin: 0;
}
.accordion {
list-style-type: none;
margin: 0;
padding: 0;
border: 1px solid Black;
background-color: White;
}
.accordion-drawer {
border-bottom: 1px solid Black;
}
.accordion-drawer:last-child {
border-bottom: none;
}
.accordion-trigger {
position: relative;
display: block;
width: 100%;
text-align: left;
border: none;
background-color: LightGrey;
}
.accordion-trigger[aria-expanded="true"] {
border-bottom: 1px solid Black;
background-color: Grey;
color: White;
}
.accordion-trigger:hover {
background-color: DarkGrey;
color: White;
}
.accordion-trigger:focus {
outline: none;
}
.accordion-trigger[aria-expanded="true"] .accordion-icon {
}
.accordion-title {
pointer-events: none;
}
.accordion-icon {
pointer-events: none;
position: absolute;
width: 18px; /* Same as h3 */
width: 1em;
height: 18px; /* Same as h3 */
height: 1em;
right: 9px; /* Half Height */
right: 0.5em;
}
.accordion-panel {
padding: 0px 6px;
padding: 0em 0.375em;
}
JavaScript:
function initialiseAccordian($accordion) {
if (typeof $accordion === "undefined" || $accordion === null) {alert("initialiseAccordian: $accordion invalid or undefined.");return;};
$accordionDrawerCollection = getElementsByClassName("accordion-drawer", null, $accordion);
if ($accordionDrawerCollection.length == 0) {alert("initialiseAccordian: $accordionDrawerCollection invalid or undefined.");return;};
for (var i = 0; i < $accordionDrawerCollection.length; i++) {
$accordionTrigger = getElementsByClassName("accordion-trigger", null, $accordionDrawerCollection[i])[0];
if ($accordionTrigger === null) {alert("initialiseAccordian: $accordionTrigger invalid or undefined.");continue;};
$accordionTrigger.setAttribute("aria-expanded", "false");
$accordionTrigger.onclick = accordionTrigger_handler($accordion, $accordionDrawerCollection[i]);
$accordionIcon = getElementsByClassName("accordion-icon", null, $accordionDrawerCollection[i])[0];
if (typeof $accordionIcon === "undefined" || $accordionIcon === null) {
(getElementsByClassName("accordion-title", null, $accordionTrigger)[0]).parentNode.innerHTML += '<span class="accordion-icon"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 100 100"><path d="M0,25 L0,35 L50,75 L100,35 L100,25 L50,65 L0,25 Z" /><image xlink:href="" href="" src="../assets/images/Expand.png" width="100%" height="100%" /></svg></span>';
};
$accordionPanel = getElementsByClassName("accordion-panel", null, $accordionDrawerCollection[i])[0];
if ($accordionPanel === null) {alert("initialiseAccordian: $accordionPanel invalid or undefined.");continue;};
$accordionPanel.setAttribute("hidden", "hidden");
$accordionPanel.style.display = "none";
};
}
var accordionTrigger_handler = function($accordion, $targetAccordionDrawer) {
return function() {
if (typeof $accordion === "undefined" || $accordion === null) {alert("accordionTrigger_handler: $accordion invalid or undefined.");return;};
if (typeof $targetAccordionDrawer === "undefined" || $targetAccordionDrawer === null) {alert("accordionTrigger_handler: $targetAccordionDrawer invalid or undefined.");return;};
$accordionTrigger = getElementsByClassName("accordion-trigger", null, $targetAccordionDrawer)[0];
if ($accordionTrigger === null) {return;};
new_accordionDrawer_expanded = ($accordionTrigger.getAttribute("aria-expanded") == "true" ? "false" : "true");
$accordionTrigger.setAttribute("aria-expanded", new_accordionDrawer_expanded);
$targetAccordionDrawerPanel = getElementsByClassName("accordion-panel", null, $targetAccordionDrawer)[0];
if ($targetAccordionDrawerPanel === null) {alert("accordionTrigger_handler: $targetAccordionDrawerPanel invalid or undefined.");return;};
if (new_accordionDrawer_expanded == "true") {
if (!hasAttribute("hidden", $targetAccordionDrawerPanel)) {return;};
$targetAccordionDrawerPanel.setAttribute("hidden", "false"); // For Edge
$targetAccordionDrawerPanel.removeAttribute("hidden");
$targetAccordionDrawerPanel.style.display = "block";
(getElementsByClassName("accordion-icon", null, $accordionTrigger)[0]).innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 100 100"><path d="M0,75 L0,65 L50,25 L100,65 L100,75 L50,35 L0,75 Z" /><image xlink:href="" href="" src="../assets/images/Collapse.png" width="100%" height="100%" /></svg>';
} else {
$targetAccordionDrawerPanel.setAttribute("hidden", "hidden");
$targetAccordionDrawerPanel.style.display = "none";
(getElementsByClassName("accordion-icon", null, $accordionTrigger)[0]).innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 100 100"><path d="M0,25 L0,35 L50,75 L100,35 L100,25 L50,65 L0,25 Z" /><image xlink:href="" href="" src="../assets/images/Expand.png" width="100%" height="100%" /></svg>';
};
}
}
initialiseAccordian(document.getElementById("accordion-65c7"));